<template>
   <el-row style="padding: 5px">
     <el-row>
       <el-card>
         <el-form :inline="true" :model="formInline" class="" size="small">
          <el-form-item label="查询时间">
            <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
           <el-form-item label="城市">
             <el-input v-model="formInline.city" placeholder="输入城市,例:南宁"></el-input>
           </el-form-item>
           <el-form-item label="产品">
             <el-select v-model="value" placeholder="请选择产品">
               <el-option
                 v-for="item in options"
                 :key="item.sellproName "
                 :label="item.sellproName "
                 :value="item.sellproName ">
                 <template>
                   <img :src="item.sellproImg" style="width: 30px; height: 30px; margin:0 10px -6px 0;" />
                   <span style="vertical-align: middle;">{{ item.sellproName }}</span></template>
               </el-option>
             </el-select>
           </el-form-item>
           <el-form-item>
             <el-button type="primary" icon="el-icon-search">搜索</el-button>
             <el-button type="" icon="el-icon-refresh-right">重置</el-button>
           </el-form-item>
           <el-form-item style="float: right">
             <button_disbable style="margin-right: 10px"></button_disbable>
<!--             <el-button type="warning" plain icon="el-icon-download">导出</el-button>-->
             <el-button type="primary" plain icon="el-icon-sort" @click="changePage">{{this.changeTitle}}</el-button>
           </el-form-item>
         </el-form>
       </el-card>
     </el-row>

     <el-row style="margin-top: 5px" v-show="this.changeON">
       <el-card>
       <el-row>
         <el-table :data="tableData.slice((currentPage -1) *pageSize,currentPage*pageSize)" border show-summary style="width: 100%">
           <el-table-column align="center" prop="id" label="序号" width="100">
             <template slot-scope="{ row, $index }">{{ $index + 1 }}</template>
           </el-table-column>
           <el-table-column align="center" prop="sellproName" label="产品"></el-table-column>
           <el-table-column align="center" prop="city" label="城市"></el-table-column>
           <el-table-column align="center" prop="count" label="次数"></el-table-column>
         </el-table>
         <el-pagination
           style="margin: 20px 0; float: right"
           :current-page.sync="currentPage"
            background
           :page-size="pageSize"
           layout="total, prev, pager, next, jumper"
           :total="this.tableData.length">
         </el-pagination>
       </el-row>
       </el-card>
     </el-row>
     <el-row  style="margin-top: 5px" v-show="this.changeOFF">
       <el-card>
         <map-Chart :chart-data="this.recordData" />
       </el-card>
     </el-row>
 </el-row>
</template>
<script>
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import mapChart from "./MapCharts/index.vue"
import Button_disbable from "@/views/agriculture/buttonDis/button_disbable.vue";
import {listRecord} from "@/api/agriculture/record";
import {listSellpro} from "@/api/agriculture/sellpro";
import Template from "@/views/iot/template/index.vue";
export default {
  name: '',
  mixins: [],
  components: {Template, Button_disbable, mapChart},
  props: {},
  data() {
    return{
      currentPage:1,
      pageSize:10,
      changeON:false,
      changeOFF:true,
      changeCount:1,
      changeTitle:'表格模式',
      options: [],
      recordParams:{
        traceCode:'',
        query_date:'',
        queryAddress:'',
        queryCity:'',
      },
      sellproParams:{
        sellproName:'',
        sellproArea:'',
        sellproWeight:'',
        sellproGuige:'',
        sellproImg:'',
        germplasmId:'',
        batchId:'',
        landId:'',
        deviceId:'',
        cameraId:'',
        staffId:'',
        shopId:'',
        h5Url:'',
        status:'',
        orderNum:'',
      },
      value: '',
      value1:'',
      formInline: {
        city: '',
        region: ''
      },
      recordData:[],
      cityName: null,
      provinceName: null,
      address: null,
      clickedCoordinate: null,
      tableData:[],
    }
  },
  async  mounted() {
    await this.getRecordList()
  },

  methods: {
    // 获取记录信息
    async getRecordList(){
      const row1 = await listSellpro(this.sellproParams)
      const row =await listRecord(this.recordParams)
      this.options =row1.rows
      this.tableData =row.rows
      this.dataConut()
      this.tableData =this.tableData.map(item1=>{
        const findData = this.options.find(item2 => item1.sellproId === item2.sellproId)
        return {
          ...item1,
          sellproName:findData.sellproName
        }
      })
      const cityCount = {};
      this.tableData.forEach(item => {
        const cityName = item.city;
        if (!cityCount[cityName]) {
          cityCount[cityName] = 0;
        }
        cityCount[cityName] += item.count;
      });
      for (const city in cityCount) {
        this.recordData.push({
          city: city,
          count: cityCount[city]
        });
      }
    },
    dataConut()
    {
      const classifiedData = {};
     // 按照 sellproid 分类存储数据
      this.tableData.forEach((item) => {
        const { sellproId, queryAddress } = item;
        if (!classifiedData[sellproId]) {
          classifiedData[sellproId] = {};
        }
        if (!classifiedData[sellproId][queryAddress]) {
          classifiedData[sellproId][queryAddress] = 0;
        }
        classifiedData[sellproId][queryAddress]++;
      });
      this.tableData =[]
      for (const sellproId in classifiedData) {
        for (const queryAddress in classifiedData[sellproId]) {
          this.tableData.push({
            sellproId: parseInt(sellproId),
            city: queryAddress,
            count: classifiedData[sellproId][queryAddress],
          });
        }
      }
    },
    // 切换界面
    changePage() {
      this.changeON = this.changeCount == 1;
      this.changeOFF = this.changeCount !== 1;
      this.changeCount = this.changeCount === 1 ? 0 : 1;
      this.changeTitle = this.changeTitle === '表格模式' ? '地图模式' :'表格模式';
    },

  }
};
</script>
<style lang="scss" scoped>
</style>
